<script setup>
import { ref, reactive, computed } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const ruleForm = reactive({
    username: '',
    phonenum: '',
    password: '',
    code: '',
    code2: '',
})
const value1 = ref(false)
const msg = ref('发送验证码')
const timer = ref(null)
const count = ref(10)
const cccname = ref('')

// 不需要响应式的常量 不需要ref或reactive来定义
const rules = {
    phonenum: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' },
    ]
}

const onLogin = () => {
    request.post('/login', ruleForm).then(res => {
        if (res.data.code == 200) {
            // 登陆成功：提示成功，跳转到首页，保存token
            ElMessage({
                message: '登录成功',
                type: 'success',
            })
            // 保存token
            localStorage.setItem("viteToken", res.data.token)
            // 保存账户名
            localStorage.setItem("username", ruleForm.username)
            // 存到vuex里
            // this.$store.commit('saveUsername', this.ruleForm.username)
            // 跳转到首页
            router.push("/")
        } else {
            console.log(res.data.message)
            // 没有登录成功，提示后端传过来的message
            ElMessage.error(res.data.message)
        }
    }).catch(err => {
        ElMessage.error(err)
    })
}
const sendCode = () => {
    timer.value = setInterval(() => {
        count.value--
        if (count.value == 0) {
            msg.value = "发送验证码"
            // 清除定时器
            clearInterval(timer.value)
            // 重置时间
            count.value = 10
        } else {
            msg.value = count.value + 's后重新发送'
        }
    }, 1000);
}
const flag = computed(() => {
    return msg.value !== '发送验证码'
})

</script>
<template>
    <div class="container" :class="{ dark: value1 == true }">
        <img class="bg" src="@/assets/login.svg" />
        <el-switch v-model="value1" class="switch" />
        <div class="box">
            <p class="text">用户登录</p>
            <el-form :model="ruleForm" :rules="rules" ref="ccc" label-width="70px">
                <el-form-item label="账号:" prop="username">
                    <el-input class="input" v-model="ruleForm.username" placeholder="Please input"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phonenum">
                    <el-input class="input" v-model="ruleForm.phonenum" placeholder="Please input"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input class="input" v-model="ruleForm.password" placeholder="Please input"></el-input>
                </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input class="input" v-model="ruleForm.code" placeholder="Please input">
                        <template #append>1234</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input class="input" v-model="ruleForm.code2" placeholder="Please input">
                        <template #append><el-button @click="sendCode" :disabled="flag">{{ msg }}</el-button></template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="btn" @click="onLogin"> 登录</el-button>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    min-height: 100vh;

    &.dark {
        background: #000;
    }

    .switch {
        position: fixed;
        right: 40px;
        top: 20px;
    }

    .bg {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 600px;
    }

    .box {
        width: 400px;
        height: 300px;
        // background: rgb(76, 76, 76);
        position: absolute;
        left: 70%;
        top: 60%;
        transform: translate(-50%, -50%);
        padding: 20px;

        .text {
            text-align: center;
            font-size: 20px;
            color: #807c7c;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .input {
            width: 100%;
        }

        .btn {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px auto;
        }
    }

}

.el-input {
    width: 240px;
    margin: 0 auto;
}

.el-input__inner {
    width: 240px;
    margin: 0 auto;
}
</style>
